<template>
  <div>
    <el-tag
        :key="tag.path"
        v-for="tag in tags"
        :effect="themeEffect(tag.path)"
        closable
        style="margin-right: 15px;"
        :disable-transitions="false"
        @close="handleTagClose(tag)">
      {{ tag.label }}
    </el-tag>
  </div>
</template>

<script>
export default {
  name: "CommonTag",
  data() {
    return {
      tags: this.$store.state.tab.tabList,
    }
  },
  methods: {
    handleTagClose(tag) {

      //删除tag元素
      this.tags.splice(this.tags.indexOf(tag), 1);
      if (!(this.tags.length === 0)) {
        //删完之后跳转到第一个元素
        if (this.$route.path !== this.tags[0].path && !(this.$route.path === '/home' && (this.tags[0].path === '/'))) {
          this.$router.push(this.tags[0].path)
        }
      } else {
        if (!(this.$route.path === '/' || this.$route.path === '/home')) {
          this.$router.push('/home')
        }
      }
    }
  },
  computed:{
    //选中的tag就会变成高亮状态
    themeEffect(){
      return function (path){
        return ((this.$route.path===path)||(this.$route.path==='/'))?'dark':'plain'
      }
    }
  }

}
</script>

<style scoped>

</style>
